<template>
  <div class="box">
    <div
      v-for="(entity, index) in listData"
      :key="index"
      class="tui-product__item"
    >
      <Lazyload
        width="100%"
        height="270px"
        :src="entity && entity.img"
      ></Lazyload>
      <div class="tui-product__content">
        <div class="tui-product__title">{{ entity.name || "" }}</div>
        <div>
          <div class="tui-product__price">
            <span class="tui-sale__price">￥{{ entity.sale || "0.00" }}</span>
            <span class="tui-factory__price"
              >￥{{ entity.factory || "0.00" }}</span
            >
          </div>
          <div class="tui-product__pay">{{ entity.payNum || 0 }}人付款</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Lazyload from "@/components/lazyload/HLazyload.vue";

const listData = ref([
  {
    img: "https://thorui.cn/images/mall/product/1.jpg",
    name: "欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜 30ml（欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离）",
    sale: 599,
    factory: 899,
    payNum: 2342,
  },
  {
    img: "https://thorui.cn/images/mall/product/2.jpg",
    name: "德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒",
    sale: 29,
    factory: 69,
    payNum: 999,
  },
  {
    img: "https://thorui.cn/images/mall/product/3.jpg",
    name: "【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红",
    sale: 299,
    factory: 699,
    payNum: 666,
  },
  {
    img: "https://thorui.cn/images/mall/product/4.jpg",
    name: "百雀羚套装女补水保湿护肤品",
    sale: 1599,
    factory: 2899,
    payNum: 236,
  },
  {
    img: "https://thorui.cn/images/mall/product/5.jpg",
    name: "百草味 肉干肉脯 休闲零食 靖江精制猪肉脯200g/袋",
    sale: 599,
    factory: 899,
    payNum: 2399,
  },
  {
    img: "https://thorui.cn/images/mall/product/6.jpg",
    name: "短袖睡衣女夏季薄款休闲家居服短裤套装女可爱韩版清新学生两件套 短袖粉色长颈鹿 M码75-95斤",
    sale: 599,
    factory: 899,
    payNum: 2399,
  },
  {
    img: "https://thorui.cn/images/mall/product/1.jpg",
    name: "欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜",
    sale: 599,
    factory: 899,
    payNum: 2342,
  },
  {
    img: "https://thorui.cn/images/mall/product/2.jpg",
    name: "德国DMK进口牛奶",
    sale: 29,
    factory: 69,
    payNum: 999,
  },
  {
    img: "https://thorui.cn/images/mall/product/3.jpg",
    name: "【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红",
    sale: 299,
    factory: 699,
    payNum: 666,
  },
  {
    img: "https://thorui.cn/images/mall/product/4.jpg",
    name: "百雀羚套装女补水保湿护肤品",
    sale: 1599,
    factory: 2899,
    payNum: 236,
  },
]);
</script>

<style scoped>
.box {
  height: 600px;
  overflow: auto;
}
.tui-product__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20rpx;
}

.tui-product__title {
  color: #2e2e2e;
  font-size: 26rpx;
  line-height: 32rpx;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tui-product__price {
  padding-top: 18rpx;
}

.tui-sale__price {
  font-size: 34rpx;
  font-weight: 500;
  color: #e41f19;
}

.tui-factory__price {
  font-size: 24rpx;
  color: #a0a0a0;
  text-decoration: line-through;
  padding-left: 12rpx;
}

.tui-product__pay {
  padding-top: 10rpx;
  font-size: 24rpx;
  color: #656565;
}
</style>
